<script setup lang="ts">
import { ref } from "vue"
import { Close } from "@element-plus/icons-vue"

interface IProps {
  title: string
  width: string
  showColse?: boolean
  titleCenter?: boolean
}

const props = withDefaults(defineProps<IProps>(), {
  showColse: true,
  titleCenter: false
})

const emit = defineEmits(["confirm", "close"])
const modalVisible = ref<boolean>(false)
const showModal = () => {
  modalVisible.value = true
}

const closeModal = () => {
  modalVisible.value = false
}

const handleConfirm = () => {
  emit("confirm")
}

const handleClose = () => {
  if (props.showColse) {
    emit("close")
    modalVisible.value = false
  }
}

defineExpose({
  showModal,
  closeModal
})
</script>

<template>
  <el-dialog destroy-on-close v-model="modalVisible" :show-close="false" :width="width" :before-close="handleClose">
    <template #header>
      <div
        rounded-tl-5px
        rounded-tr-5px
        px-20px
        py-15px
        class="bg-#dae6f5"
        flex
        items-center
        :class="[titleCenter ? 'justify-center' : 'justify-between']"
      >
        <span text-18px font-bold class="text-#333">{{ title }}</span>

        <el-icon v-if="showColse" cursor-pointer @click="modalVisible = false"><Close /></el-icon>
      </div>
    </template>

    <slot name="content" />

    <!-- <span text-16px class="text-#252526">确定退出账号吗？</span> -->

    <template #footer>
      <slot name="footer" />
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.el-dialog {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  border-radius: 5px;
  background: #f7f9fb;

  .el-dialog__body {
    padding: 20px;
  }
}
</style>
